import { useEffect, useState, useMemo, useRef } from "react";
import history from '@/router/history';
import styles from './index.module.scss';
import { Button, message, Tooltip } from "antd";
import clsx from 'clsx';
import { Application } from '@/canvas';
import Icon from '@/components/Icon';
import Righter from './Righter';
import { SyncOutlined } from '@ant-design/icons';
import Footer from './footer';
import Header from '@/components/header';

type Size = Record<'width' | 'height', number>;

export default () => {
  const [size, setSize] = useState<Size | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
  const [app, setApp] = useState<Application | null>(null);

  const lefter = useRef<HTMLDivElement>(null);
  const canvas = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!lefter.current) return;

    const { width, height } = lefter.current.getBoundingClientRect();
    setSize({ width, height });
    return () => {
      setApp(app => {
        app?.dispose();
        return app;
      })
    }
  }, []);

  useEffect(() => {
    if (!size || !canvas.current) return;

    setApp(new Application(canvas.current));
  }, [size]);

  return (
    <div className={styles.modelshow}>
      <Header>
        藏宝室系列橱柜
      </Header>
      <div ref={lefter} className={styles.modelView} style={{height:"calc(100% - 90px)"}}>
        {size && (
          <div ref={canvas} style={size} />
        )}
        {loading && (
          <div className={styles.mask}>
            <SyncOutlined spin />
          </div>
        )}
      </div>
      <Footer/>
      <div className={styles.rt}>
        {app && (
          <Righter
            app={app}
            setLoading={setLoading}
          />
        )}
      </div>
    </div>
  )
}